import Taro, { Component } from '@tarojs/taro'
import { View, Image, Swiper, SwiperItem, ScrollView } from '@tarojs/components'
import { AtSearchBar, AtTabBar } from 'taro-ui'
import styles from './index.module.less'
import CardList from '../../components/CardList'
import Card from '../../components/Card'
import Footer from '../../components/Footer'

const swiperItems = [
  { id: '111', title: '', img: 'https://img.yzcdn.cn/upload_files/2020/03/10/FsVXdw5-t1egfqW_hA0Qrm0t4A1R.png!large.png', url: 'https://www.baidu.com', desc: '轮播图111' },
  { id: '222', title: '', img: 'https://img.yzcdn.cn/upload_files/2020/03/10/FhSFWNKgkdt30YeQ1WG1mfhY9EdM.png!large.png', url: 'https://www.baidu.com', desc: '轮播图111' },
  { id: '333', title: '', img: 'https://img.yzcdn.cn/upload_files/2020/03/10/Fru561-WGFYJjtt6Bh7FC8KazFh8.png!large.png', url: 'https://www.baidu.com', desc: '轮播图111' }
]

const mainMenuItems = [
  { id: '111', title: '生活', img: '', url: 'https://www.baidu.com', desc: '轮播图111' },
  { id: '222', title: '感官', img: '', url: 'https://www.baidu.com', desc: '轮播图111' },
  { id: '333', title: '大运动', img: '', url: 'https://www.baidu.com', desc: '轮播图111' },
  { id: '444', title: '语言', img: '', url: 'https://www.baidu.com', desc: '轮播图111' },
  { id: '555', title: '艺术', img: '', url: 'https://www.baidu.com', desc: '轮播图111' },
  { id: '666', title: '社会', img: '', url: 'https://www.baidu.com', desc: '轮播图111' },
  { id: '777', title: '家庭', img: '', url: 'https://www.baidu.com', desc: '轮播图111' },
  { id: '888', title: '商城', img: '', url: 'https://www.baidu.com', desc: '轮播图111' },
]
// 名家专栏数据

const specialist = [
  { id: '111', title: '亚男频道', img: 'https://img.yzcdn.cn/upload_files/2019/12/27/FsWscJcH-mowi5pT5RIUYV093gVh.jpg!large.jpg', url: 'https://www.baidu.com', desc: '' },
  { id: '111', title: '木生蒙语', img: 'https://img.yzcdn.cn/upload_files/2019/12/27/FrJ-Rb3iPGobdMNN-EEaBHzb9Qzr.jpg!large.jpg', url: 'https://www.baidu.com', desc: '' },
  { id: '111', title: '名师谈亲子', img: 'https://img.yzcdn.cn/upload_files/2019/12/27/FlWufbN0QlBhJVIRS9U-3DcP4npw.jpg!large.jpg', url: 'https://www.baidu.com', desc: '' },
  { id: '111', title: '蒙爸蒙妈', img: 'https://img.yzcdn.cn/upload_files/2019/12/27/Ft-QzsFkTeURd_PRues7kWs6NiqJ.jpg!large.jpg', url: 'https://www.baidu.com', desc: '' },
  { id: '111', title: '视情家教基本法', img: 'https://img.yzcdn.cn/upload_files/2020/03/04/FmqjcVDd9Seja9tpcP1dxZ5X7Rk0.png!large.png', url: 'https://www.baidu.com', desc: '' },
  { id: '111', title: '美杉艺术', img: 'https://img.yzcdn.cn/upload_files/2019/12/27/FtkRpULc_r68qxSn7LeFdkW5DRcO.jpg!large.jpg', url: 'https://www.baidu.com', desc: '' },
  { id: '111', title: 'Kevin老师说', img: 'https://img.yzcdn.cn/upload_files/2020/03/05/Fj-Z4LAl0MNUcZ_00TVopR1odvpV.png!large.png', url: 'https://www.baidu.com', desc: '' },
  { id: '111', title: '蒙氏教育在家庭', img: 'https://img.yzcdn.cn/upload_files/2020/03/10/Fub2dalu-B1MGyxzo9ogjTQ8BzW8.png!large.png', url: 'https://www.baidu.com', desc: '' },
  { id: '111', title: '家庭亲子音乐游戏', img: 'https://img.yzcdn.cn/upload_files/2020/03/10/FiKfQIbeXzBslzuBQFKL2RO_MKVc.png!large.png', url: 'https://www.baidu.com', desc: '' },
]

//热文推荐数据
const cardList = [
  {
    id: '111',
    img: 'https://img.yzcdn.cn/upload_files/2020/03/10/FlZcR9XXMuIY1mCKtSLWLioBX6zo.png!small.png',
    type: 'audio',
    title: '30-36个月宝宝运动发展里程碑，你读懂了吗？',
    subTitle: '0-3岁宝宝运动能力发展游戏',
    url: 'https://www.baidu.com',
    metas: ['03-21', '50次学习', '非常好', '强烈推荐']
  },
  {
    id: '222',
    img: 'https://img.yzcdn.cn/upload_files/2020/03/10/FkP7h_QKghTz9-6qXPqbZvyi8oe0.png!small.png',
    type: 'audio',
    title: '0-3岁，家庭中必不可少的感官教育的感官教育的感官教育',
    subTitle: '蒙氏家庭0-3',
    url: 'https://www.baidu.com',
    metas: ['03-21', '50次学习']
  },
  {
    id: '333',
    img: 'https://img.yzcdn.cn/upload_files/2020/03/09/FghFCaXKS9ZOnu8sAMVePRZxQGQo.png!small.png',
    type: 'audio',
    title: '一起来玩这3个亲子触觉游戏，帮助孩子建立安全感',
    subTitle: '家长这样做利于宝宝手指灵活发展',
    url: 'https://www.baidu.com',
    metas: ['03-21']
  },
]

//视频推荐数据
const cardVideos = [
  {
    id: '111',
    price: 19.99,
    img: 'https://img.yzcdn.cn/upload_files/2019/12/28/8333b40fdd4225a3ffab5e10d33e3ef3.jpg!origin.jpg',
    type: 'audio',
    title: '30-36个月宝宝运动发展里程碑，你读懂了吗？',
    subTitle: '0-3岁宝宝运动能力发展游戏',
    url: 'https://www.baidu.com',
    tags: ['03-21', '50次学习', '非常好']
  },
  {
    id: '222',
    price: 0,
    img: 'https://img.yzcdn.cn/upload_files/2020/01/14/FnLYWd3wSoMkOEgWxGIcLMVh7CoO.jpg!origin.jpg',
    type: '',
    title: '0-3岁，家庭中必不可少的感官教育的感官教育的感官教育',
    subTitle: '蒙氏家庭0-3',
    url: 'https://www.baidu.com',
    tags: ['03-21', '50次学习'],
  },
  {
    id: '333',
    img: 'https://img.yzcdn.cn/upload_files/2020/03/09/FghFCaXKS9ZOnu8sAMVePRZxQGQo.png!small.png',
    title: '一起来玩这3个亲子触觉游戏，帮助孩子建立安全感',
    price: 0,
    url: 'https://www.baidu.com',
    tags: []
  },
  {
    id: '444',
    img: 'https://img.yzcdn.cn/upload_files/2020/03/09/FghFCaXKS9ZOnu8sAMVePRZxQGQo.png!small.png',
    title: '一起来玩这3个亲子触觉游戏，帮助孩子建立安全感',
    subTitle: '家长这样做利于宝宝手指灵活发展',
    url: 'https://www.baidu.com',
    tags: ['50次学习']
  },
]

// 音频推荐数据
const cardAudio = [
  {
    id: '111',
    title: '养育男孩01',
    img: 'https://img.yzcdn.cn/upload_files/2019/12/28/FosQecZRm7xtQwmvcL4LQRary9Y8.png!origin.png',
    price: 0,
    url: 'https://www.baidu.com',
    tags: ['220次学习']
  },
  {
    id: '222',
    title: '感受爱1',
    img: 'https://img.yzcdn.cn/upload_files/2020/02/07/Fv51jlWYEI3C5Iq8xeBEZJtuYV4C.jpg!origin.jpg',
    price: 0,
    url: 'https://www.baidu.com',
    tags: ['27次学习'],
  },
  {
    id: '333',
    title: '爱与规则 1',
    img: 'https://img.yzcdn.cn/upload_files/2020/02/20/FrzGRFoDdbG8wdcx_s2UQG2-V40Y.jpg!origin.jpg',
    price: 0,
    url: 'https://www.baidu.com',
    tags: ['8次学习'],
  },
  {
    id: '444',
    title: '发现孩子1',
    img: 'https://img.yzcdn.cn/upload_files/2020/02/25/Ftm5Q_ZyXvtdWMLqcbuF5NUFRTOH.png!origin.png',
    price: 0,
    url: 'https://www.baidu.com',
    tags: ['2次学习'],
  },
]
// 蒙师空间
const mengteachers = [
  {
    id: '111',
    title: '赠汪伦',
    subTitle: '专栏：3-6语言课程',
    img: 'https://img.yzcdn.cn/upload_files/2020/02/22/FskdzbNVdPKq7TlaPr0CsIO11Pdm.jpg!origin.jpg',
    url: 'https://www.baidu.com',
    tags: ['8次观看']
  },
  {
    id: '222',
    title: '报纸接力',
    subTitle: '专栏：3-6运动类课程',
    img: 'https://img.yzcdn.cn/upload_files/2020/02/22/FuyN6pkcqE1IJqxAw5ii2O2bbeHi.jpg!origin.jpg',
    url: 'https://www.baidu.com',
    tags: ['5次观看']
  },
  {
    id: '333',
    title: '色彩攀登',
    subTitle: '专栏：3-6科学课程',
    img: 'https://img.yzcdn.cn/upload_files/2020/02/22/FmWtdW0hLZIbvaQoRezc9YUf3__w.jpg!origin.jpg',
    url: 'https://www.baidu.com',
    tags: ['2次观看']
  },
  {
    id: '444',
    title: '实物与实物配对',
    subTitle: '专栏：0-3蒙氏课程',
    img: 'https://img.yzcdn.cn/upload_files/2020/02/22/Fhk_A__AVH6z2nSsFf8tTgVm6M-s.jpg!origin.jpg',
    url: 'https://www.baidu.com',
    tags: ['2次学习'],
  },
]
// 蒙氏学院
const montessori = [
  {
    id: '111',
    subTitle: 'Hello，蒙台梭利',
    img: 'https://img.yzcdn.cn/upload_files/2019/12/31/FqJcNkkD6MMiwo7M2Wl7uqpkx8fc.jpg!large.jpg',
    url: 'https://www.baidu.com',
  },
  {
    id: '222',
    subTitle: '蒙“视”',
    img: 'https://img.yzcdn.cn/upload_files/2019/12/31/Fh1p9-IIJWqxY-l6XF8qUVLC6M_s.jpg!large.jpg',
    url: 'https://www.baidu.com',
  },
  {
    id: '333',
    subTitle: '蒙眼看世界',
    img: 'https://img.yzcdn.cn/upload_files/2019/12/31/Fo_H6OkpxB71BrG8j-gobP2pUZaF.jpg!large.jpg',
    url: 'https://www.baidu.com',
  },
]
class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  componentWillReact() {
    console.log('componentWillReact')
  }

  commonClicked(naviTo, item) {
    console.log(item.title);
    const paths = ['column', 'article', 'audioPlay', 'videoPlay', 'userCenter']

    if (item && item.title === '商城') {
      Taro.navigateTo({
        url: '../mall/index',
      })
      return
    }

    if (item && item.title === '商城') {
      Taro.navigateTo({
        url: '../mall/index',
      })
      return
    }

    paths.includes(naviTo) && Taro.navigateTo({
      url: `../${naviTo}/index`,
    })
  }

  render() {
    console.log(styles);

    return (
      <View className={styles.container}>
        <AtSearchBar></AtSearchBar>
        {/* 主轮播图 */}
        <Swiper
          className={styles.swiper}
          indicatorColor='#999'
          indicatorActiveColor='#4a90e2'
          vertical={false}
          circular
          indicatorDots
          autoplay
        >
          {swiperItems.map(item =>
            (<SwiperItem key={item.id} >
              <Image className={styles.swiperItemImg} src={item.img} />
            </SwiperItem>))}
        </Swiper>
        {/* 主菜单 */}
        <View className={styles.mainMenu}>
          <Image className={styles.mainMenuImage} src='https://img.yzcdn.cn/upload_files/2020/01/09/FljqDNaLhM8ANqBb6faUYvqVLN04.png!large.png' />
          <View className={styles.mainMenuItemContainer}>
            {mainMenuItems.map(item => <View className={styles.mainMenuItem} key={item.id} onClick={this.commonClicked.bind(this, 'column', item)}>{item.title}</View>)}
          </View>
        </View>
        {/* 晚安故事 */}
        <View className={styles.columnArea}>
          <Image className={styles.columnAreaTitle} src='https://img.yzcdn.cn/upload_files/2020/03/10/FtBcoZF4LFiqSFppaDHxZuoTDezo.png!large.png' ></Image>
          <Image className={styles.columnAreaFullPic} mode='widthFix' src='https://img.yzcdn.cn/upload_files/2020/03/15/Fn62IQ-VMBwXzM2uVGKqhkwdZzNV.png!large.png' onClick={this.commonClicked.bind(this, 'column')}></Image>
        </View>
        {/* 名家专栏 */}
        <View className={styles.columnArea}>
          <Image className={styles.columnAreaTitle} src='https://img.yzcdn.cn/upload_files/2020/03/10/Fu7AaVs2qW3exgStaxwUSksPu0Or.png!large.png'></Image>
          <ScrollView
            className='scrollview'
            scrollX
            scrollWithAnimation
            scrollTop={0}
            lowerThreshold={20}
            upperThreshold={20}
          >
            <View style={{ width: `${118 * specialist.length}Px` }}>
              {specialist.map(item => (
                <View className={styles.ScrollViewItem} key={item.id} onClick={this.commonClicked.bind(this, 'column', item)}>
                  <Image className={styles.ScrollViewItemImage} mode='scaleToFill' src={item.img} />
                  <View className={styles.ScrollViewItemTitle}>{item.title}</View>
                </View>
              ))}
            </View>
          </ScrollView>
        </View>
        {/* 热文推荐 */}
        <View className={styles.columnArea}>
          <Image className={styles.columnAreaTitle} src='https://img.yzcdn.cn/upload_files/2020/03/10/FhNDpYNHFDwHUQNCIf9n8XC3syJ2.png!large.png'></Image>
          <View className={styles.columnListContainer}>
            {cardList.map(item => (
              <View key={item.id} onClick={this.commonClicked.bind(this, 'article', item)}>
                <CardList {...item} />
              </View>
            ))}
          </View>
        </View>
        {/* 视频推荐 */}
        <View className={styles.columnArea}>
          <Image className={styles.columnAreaTitle} src='https://img.yzcdn.cn/upload_files/2020/03/10/Fl-nCd1gSwx12BGJHNNN4Y17euM6.png!large.png'></Image>
          <View className={styles.columnListContainer}>
            {cardVideos.map(item => (
              <View className={styles.divToTwo} key={item.id} onClick={this.commonClicked.bind(this, 'videoPlay', item)}>
                <Card {...item} roundedBorder />
              </View>
            ))}
          </View>
        </View>
        {/* 音频推荐 */}
        <View className={styles.columnArea}>
          <Image className={styles.columnAreaTitle} src='https://img.yzcdn.cn/upload_files/2020/03/10/FgF77gzGO9MEV7V_no5nMwi3PDQ3.png!large.png'></Image>
          <View className={styles.columnListContainer}>
            {cardAudio.map(item => (
              <View className={styles.divToTwo} key={item.id} onClick={this.commonClicked.bind(this, 'audioPlay', item)}>
                <Card {...item} roundedBorder imgMode='aspectFit' />
              </View>
            ))}
          </View>
        </View>
        {/* 蒙师空间 */}
        <View className={styles.columnArea}>
          <Image className={styles.columnAreaTitle} src='https://img.yzcdn.cn/upload_files/2020/03/10/FhubaGl2wf6Dv4OO9uLPu8T8aDfu.png!large.png'></Image>
          <View className={styles.columnListContainer}>
            {mengteachers.map(item => (
              <View className={styles.divToTwo} key={item.id} onClick={this.commonClicked.bind(this, 'article', item)}>
                <Card {...item} />
              </View>
            ))}
          </View>
          {/* 蒙氏学院 */}
        </View>
        <View className={styles.columnArea}>
          <Image className={styles.columnAreaTitle} src='https://img.yzcdn.cn/upload_files/2020/03/10/Fiqqhn0mC4uOiFNzlhLAWrlRa55g.png!large.png'></Image>
          <View className={styles.columnListContainer}>
            {montessori.map(item => (
              <View className={styles.divToThree} key={item.id} onClick={this.commonClicked.bind(this, 'videoPlay', item)}>
                <Card {...item} imgHeight='85%' textStyle={{ textAlign: 'center' }} />
              </View>
            ))}
          </View>
        </View>
        <Footer />
        <AtTabBar
          fixed
          tabList={[
            { title: '首页' },
            { title: '全部商品', text: 8 },
            { title: '购物车' },
            { title: '我的订单', dot: true }
          ]}
          onClick={this.commonClicked.bind(this, 'userCenter')}
        />
      </View>
    )
  }
}

export default Index 
